<template>
  <div class="admin-home">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="村集体管理平台"
      left-text="退出"
      @click-left="onLogout"
    />

    <!-- 数据概览 -->
    <data-overview :data="overviewData" />

    <!-- 快捷功能 -->
    <quick-actions :actions="quickActions" @action-click="handleQuickAction" />

    <!-- 待处理事项 -->
    <section-container title="待处理事项">
      <pending-list :items="pendingItems" @item-click="handlePendingItem" />
    </section-container>

    <!-- 近期数据 -->
    <section-container title="近期数据">
      <order-list :orders="recentOrders" />
    </section-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import DataOverview from '@/components/DataOverview.vue'
import QuickActions from '@/components/QuickActions.vue'
import SectionContainer from '@/components/SectionContainer.vue'
import PendingList from '@/components/PendingList.vue'
import OrderList from '@/components/OrderList.vue'
import { useUserStore } from '@/store/modules/user'
// 静态资源引入
import vegetablesImg from '@/assets/images/6.jpg'
import fertilizerImg from '@/assets/images/26.jpg'

const router = useRouter()
const userStore = useUserStore()
// 数据配置集中管理
const overviewData = ref([
  { title: '注册农户', value: '128' },
  { title: '今日订单', value: '32' },
  { title: '在售商品', value: '256' },
  { title: '本月收入', value: '¥12,880' }
])

const quickActions = ref([
  { title: '农户管理', icon: 'contact-o', path: { name: 'Farmers' } },
  { title: '商品管理', icon: 'shop-o', path: { name: 'Products' } },
  { title: '订单管理', icon: 'balance-list-o', path: { name: 'Orders' } },
  { title: '数据统计', icon: 'chart-trending-o', path: { name: 'Statistics' } }
])

const pendingItems = ref([
  { 
    title: '待审核商品',
    status: '待处理',
    count: 5,
    icon: 'shop-o',
    time: '2小时前',
    path: { name: 'ProductsPending' }
  },
  {
    title: '新订单待确认',
    status: '待处理',
    count: 3,
    icon: 'balance-list-o',
    time: '30分钟前',
    path: { name: 'OrdersPending' }
  },
  {
    title: '农户注册审核',
    status: '待处理',
    count: 2,
    icon: 'contact-o',
    time: '1小时前',
    path: { name: 'FarmersPending' }
  }
])

const recentOrders = ref([
  {
    id: 1,
    title: '土豆',
    description: '订单编号：2024030101',
    price: '128.00',
    status: '已完成',
    thumb: vegetablesImg  // 修改后的图片引用方式
  },
  {
    id: 2,
    title: '复合肥料',
    description: '订单编号：2024030102',
    price: '299.00',
    status: '配送中',
    thumb: fertilizerImg  // 修改后的图片引用方式
  }
])

// 方法统一管理
const handleQuickAction = (path) => router.push(path)
const handlePendingItem = (item) => router.push(item.path)

// 退出登录
const onLogout = async () => {
  try {
    await showDialog({
      title: '提示',
      message: '确定要退出登录吗？',
      showCancelButton: true
    })
    
    await userStore.logout()
    router.replace('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.admin-home {
  --section-spacing: 16px;
  background-color: var(--van-gray-1);
  padding-bottom: var(--van-padding-md);
}
</style>